import { Table, Button, Modal, Form, Input, message } from 'antd';
import { useHistory } from "react-router-dom"
import { useState, useEffect } from 'react'
import {get, post} from '../../axios/index'

// 选择
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
}
function Equipment() {
    // const [checkStrictly, setCheckStrictly] = useState(false);
    let history = useHistory();

    function goHome () {
        history.push('/')
    }

    function getData() {
        get('/ck_electrical/api/listAllCabinet').then(res => {
            if(res.data.status === '200') {
                setData(res.data.data)
            }
        })
    }

    const columns = [
        { title: '位置描述', dataIndex: 'locationDescribe', key: 'locationDescribe' },
        { title: '坐标_X', dataIndex: 'locationX', key: 'locationX' },
        { title: '坐标_Y', dataIndex: 'locationY', key: 'locationY' },
        { title: '编号', dataIndex: 'code', key: 'code' },
        {
          title: 'Action',
          dataIndex: '',
          key: 'x',
          render: (text, record, index) => <>
            <Button danger onClick={() => del(record.id)}>删除</Button>
            <Button onClick={() => addSb(record.id)}>新增设备</Button>
          </>,
        },
    ];
    const columnsCh = [
        {
            title: '序号',
            dataIndex: '',
            key: 'index',
            render: (text, record, index) => index + 1,
          },
        { title: '设备编号', dataIndex: 'serialNumber', key: 'serialNumber' },
        { title: '设备IP', dataIndex: 'facilityHost', key: 'facilityHost' },
        { title: '用户名', dataIndex: 'userName', key: 'userName' },
        { title: '密码', dataIndex: 'pwd', key: 'pwd' },
        {
          title: 'Action',
          dataIndex: '',
          key: 'x',
          render: (text, record, index) => <Button danger onClick={() => delSb(record.id)}>删除</Button>,
        },
    ];

    const [data, setData] = useState([])
    useEffect(() => {
        getData()
    }, [])

    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false)
    function okModal () {
        form.validateFields().then(values => {
            // form.resetFields();
            // onCreate(values);
            // console.info(values)
            post('/ck_electrical/api/saveCabinet', values).then(res => {
                if(res.data.status === '200') {
                    message.info(res.data.message)
                    setVisible(false)
                    getData()
                }else{
                    message.error(res.data.message)
                }
            })
        })
        .catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    function hideModal() {
        setVisible(false)
    }
    function del(cabinetId){
        Modal.confirm({
            content: '确认删除',
            title: '提示',
            okText: '确定',
            cancelText: '取消',
            onOk(close) {
                post('/ck_electrical/api/removeCabinet', {cabinetId}).then(res => {
                    if(res.data.status === '200'){
                        message.info(res.data.message)
                        getData()
                    }else{
                        message.error(res.data.message)
                    }
                })
                close()
            },
            onCancel(close) {
                close()
            }
        })
        
    }

    const [formSb] = Form.useForm();
    const [visibleSb, setVisibleSb] = useState(false)
    const [initialValuesSb, setInitialValuesSb] = useState({})
    function okModalSb () {
        formSb.validateFields().then(values => {
            // form.resetFields();
            // onCreate(values);
            console.info(values)
            post('/ck_electrical/api/saveFacility', {...initialValuesSb, ...values}).then(res => {
                if(res.data.status === '200') {
                    message.info(res.data.message)
                    setVisibleSb(false)
                    getData()
                }else{
                    message.error(res.data.message)
                }
            })
        })
        .catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    function hideModalSb() {
        setVisibleSb(false)
    }
    function addSb(electricCabinetId) {
        setVisibleSb(true)
        setInitialValuesSb({electricCabinetId})
    }
    function delSb(facilityId){
        Modal.confirm({
            content: '确认删除',
            title: '提示',
            okText: '确定',
            cancelText: '取消',
            onOk(close) {
                post('/ck_electrical/api/removeFacility', {facilityId}).then(res => {
                    if(res.data.status === '200'){
                        message.info(res.data.message)
                        getData()
                    }else{
                        message.error(res.data.message)
                    }
                })
                close()
            },
            onCancel(close) {
                close()
            }
        })
    }
    return (
        <>
            <div>
                <Button onClick={goHome}>返回</Button>
                <Button onClick={ () => setVisible(true)}>新增</Button>
            </div>
            <Table
                rowKey='id'
                pagination={false}
                columns={columns}
                // rowSelection={{ ...rowSelection, checkStrictly }}
                expandable={{
                    expandedRowRender: record => (<Table rowKey='id' pagination={false} columns={columnsCh} dataSource={record.facilityList} />),
                    rowExpandable: record => record.facilityList && record.facilityList.length > 0,
                }}
                dataSource={data}
            />
            <Modal
                title="新增"
                visible={visible}
                onOk={okModal}
                onCancel={hideModal}
                okText="确认"
                cancelText="取消"
                >
                <Form form={form}> 
                    <Form.Item label="编号" name="code">
                    <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="坐标_X" name="locationX">
                    <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="坐标_Y" name="locationY">
                    <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="位置描述" name="locationDescribe">
                    <Input placeholder="" />
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                title="新增"
                visible={visibleSb}
                onOk={okModalSb}
                onCancel={hideModalSb}
                initialValues={initialValuesSb}
                okText="确认"
                cancelText="取消"
                >
                <Form form={formSb}> 
                    <Form.Item label="设备编号" name="serialNumber">
                    <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="设备IP" name="facilityHost">
                    <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="用户名" name="userName">
                    <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="密码" name="pwd">
                    <Input placeholder="" />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
export default Equipment